<template>
    <div id="app">
        <transition
            :name="pageTransitionEffect"
            @before-enter="handleBeforeEnter"
            @after-enter="handleAfterEnter"
            @before-leave="handleBeforeLeave">
            <keep-alive
                :include="[...keepAlivePages]">
                <router-view
                    :key="routerViewKey"
                    :class="['app-view', pageTransitionClass]"
                    :data-page-id="$route.fullPath">
                </router-view>
            </keep-alive>
        </transition>
        <update-toast></update-toast>
        <div class="subject-box" v-if="$store.state.store.subjectDetail.show" @click="goTodetail($store.state.store.subjectDetail.goodsId)">
            <div class="subject-content">
                <div class="img-box">
                    <img :src="$store.state.store.subjectDetail.imgUrl" :onerror="defaultImg">
                </div>
                <div class="subject-title">
                    <div class="title-inbox">{{$store.state.store.subjectDetail.title}}</div>
                    <div class="subject-price" v-if="$store.state.store.subjectDetail.priceType">{{$store.state.store.subjectDetail.priceType == 2 ? "Lks " : "Ks "}}{{regexNum($store.state.store.subjectDetail.price)}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import {mapState, mapActions} from 'vuex';
import UpdateToast from '@/components/UpdateToast';
import {keepAlivePages} from '@/.lavas/router';
import {chatAppkey} from '../static/api/zxy_api';


import {getUserInfo} from '../static/api/mgc_api'

const ENABLE_SCROLL_CLASS = 'app-view-scroll-enabled';

export default {
    name: 'app',
    components: {
        UpdateToast
    },
    computed: {
        ...mapState('pageTransition', {
            pageTransitionType: state => state.type,
            pageTransitionEffect: state => state.effect
        }),

        ...mapState('scrollBehavior', {
            scrollPostionMap: state => state.scrollPostionMap
        }),

        pageTransitionClass() {
            return `transition-${this.pageTransitionType}`;
        },

        // https://github.com/lavas-project/lavas/issues/119
        routerViewKey() {
            let {name, params} = this.$route;
            let paramKeys = Object.keys(params);
            if (paramKeys.length) {
                return name + paramKeys.reduce((prev, cur) => prev + params[cur], '');
            }
            return null;
        }
    },
    data() {
        return {
            // https://github.com/lavas-project/lavas/issues/112
            keepAlivePages,
            defaultImg: 'this.src="' + require('../static/img/images/tolymoly.png') + '"',
        };
    },
    methods: {
        ...mapActions('scrollBehavior', [
            'savePageScrollPosition'
        ]),

        /**
         * make current page container scrollable,
         * and restore its scroll position.
         */
        restoreContainerScrollPosition(containerEl, scrollTop) {
            containerEl.classList.add(ENABLE_SCROLL_CLASS);
            containerEl.scrollTop = scrollTop;
        },

        /**
         * make body scrollable,
         * and restore its scroll position.
         */
        restoreBodyScrollPosition(containerEl, scrollTop) {
            containerEl.classList.remove(ENABLE_SCROLL_CLASS);
            document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
        },

        handleBeforeEnter(el) {
            let pageId = el.dataset.pageId;
            let {y: scrollTop = 0} = this.scrollPostionMap[pageId] || {};
            Vue.nextTick(() => {
                this.restoreContainerScrollPosition(el, scrollTop);
            });
        },

        handleAfterEnter(el) {
            let pageId = el.dataset.pageId;
            let {y: scrollTop = 0} = this.scrollPostionMap[pageId] || {};
            this.restoreBodyScrollPosition(el, scrollTop);
        },

        handleBeforeLeave(el) {
            let pageId = el.dataset.pageId;
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            this.restoreContainerScrollPosition(el, scrollTop);
            // save current scroll position in a map
            this.savePageScrollPosition({
                pageId,
                scrollPosition: {y: scrollTop}
            });
        },

        regexNum(v, len, split) {
            split = split || ',', len = Math.abs((+len) % 20 || 2)
            v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
            v = parseFloat(v) + ''
            return v.replace(/\d+/, function (v) {
                    var lit = v.length % 3 == 0
                    var index = lit ? v.length - 3 : -1
                    return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
                        return k + ((l == index && lit) ? '' : split)
                    }).split('').reverse().join('')
                }
            )
        },

        // 联安卓--聊天新增
        // loginChatForAndroid() {
        //     // 环信登录
        //     let usrInfo = localStorage.getItem('userInfo') || ''
        //     if(usrInfo) {
        //         if (window.android) {
        //             let userName = _userInfo.easemobAccount || '';
        //             let userPassword = _userInfo.easemobPassword || '';
        //             // window.android.loginIm(userName, userPassword)
        //
        //             let name = _userInfo.name || '';
        //             let photo = _userInfo.photo || '';
        //             let easemobAccount = _userInfo.easemobAccount || '';
        //             window.android.saveUserInfo(name, photo, easemobAccount)
        //
        //             // 未读消息
        //             let msgNub = window.android.myBaby()
        //             this.setMSGNumberFromAndroid(msgNub)
        //         }
        //     }
        // },
        setMSGNumberFromAndroid(n) {
            let num = n || ''
            if (num) {
                this.$store.commit('store/updateChatMsgNumber', num)
            }
        },

        getCountChat() {
            if (!window.$applozic) {
                return;
            }

            let userInfo = localStorage.getItem("userInfo") || '';
            userInfo = JSON.parse(userInfo) || '';

            if (!userInfo.id) {
                return;
            }

            $.ajax({
                url: "https://apps.applozic.com/rest/ws/user/v2/detail",
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify({userIdList: [userInfo.id]}),
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Application-Key", `${chatAppkey}`);
                    xhr.setRequestHeader("Authorization", localStorage.getItem('Authorization'));
                    xhr.setRequestHeader("Device-Key", localStorage.getItem('Device-Key'));
                },
                contentType: 'application/json',
                success: (res) => {
                    console.log(res, '未读res')
                    let num = res.response[0].unreadCount || '';

                    this.$store.commit('store/updateChatMsgNumber', num)
                }
            });
        },

        // 重置主题聊天
        reSetSubject(){
            this.$store.commit('store/updateSubjectDetail', {
                show: false,
                imgUrl: '',
                title: '',
                priceType: '',
                price: '',
                goodsId: ''
            })
        },
        goTodetail(id){
            this.reSetSubject();

            // 聊天窗口隐蔽
            let mskSlideBox = document.getElementById('mck-sidebox')
            mskSlideBox.style.display = 'none';

            console.log(id, 'to id')

            // 重置主题
            this.reSetSubject();

            this.$router.push({
                path: '/buydetail',
                query: {
                    id: id
                }
            })
        },
        loadChatDetail(clientGroupId){
            if(window.$applozic){
                // 清空session中的数据
                window.ALStorage.clearMckMessageArray();
                window.$applozic.fn.applozic('loadGroupTabByClientGroupId', {'clientGroupId': clientGroupId});
            }
        }
    },
    beforeCreate () {
        getUserInfo ().then((res) => {
            if (res.data.errorID == 0) {
                let _userInfo = JSON.stringify(res.data.object)
                // 用户基本信息存储
                localStorage.setItem("userInfo", _userInfo);
                this.$store.commit('store/updateIsLogin', true)
            } else if (res.data.errorID == 100004) {
                localStorage.removeItem("userInfo");
                this.$store.commit('store/updateIsLogin', false)
            } else {
                // this.$toast(res.data.message)
            }
        }).catch((error) => {
            console.log(error)
            // this.$toast('error,please try again later')
        })
    },
    created() {
        // this.loginChatForAndroid()
        // this.$androidMethods.setMSGNumberFromAndroid = this.setMSGNumberFromAndroid
        // this.$androidMethods.loadDetail = this.loadDetail
        this.$androidMethods.loadChatDetail = this.loadChatDetail
    },
    mounted(){
        // 全局点击事件监听
        let bodyDom = document.getElementsByTagName('body')[0];
        bodyDom.addEventListener('click', (e)=>{
            // console.log(e.target.className, '事件源')
            if(e.target.innerText == '×'){
                // 关闭聊天，请求未读数目，主题详情关闭并重置
                console.log('关闭聊天执行')
                this.getCountChat();
                this.reSetSubject();

                let slideDom = document.getElementById('mck-sidebox');
                slideDom.classList.remove("mck-height");

                // 清空session中的数据
                if(window.ALStorage){
                    window.ALStorage.clearMckMessageArray();
                }

            }else if(e.target.className == 'mck-icon-backward' || e.target.className == 'mck-conversation-tab-link'){
                console.log('返回重置聊天详情')
                this.reSetSubject();

                let slideDom = document.getElementById('mck-sidebox');
                slideDom.classList.remove('mck-height');

            }
        })
    }
};
</script>

<style>
    .subject-box{
        width: 100%;
        box-sizing: border-box;
        position: fixed;
        left: 0;
        top: 0;
        padding: 5px;
        z-index: 99999999;
        background-color: #f1f4f9;
    }
    .subject-content {
        height: 45px;
        display: flex;
        flex-direction: row;
        /*justify-content: space-between;*/
        line-height: 22px;
    }
    .img-box {
        min-width: 45px;
        width: 45px;
        height: 45px;
        overflow: hidden;
    }
    .img-box img{
        width: 45px;
        height: 45px;
    }
    .subject-title{
        font-size: 14px;
        margin-left: 10px;
        overflow: hidden;
    }

    .title-inbox{
        color: #6a5fac;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        font-family: ZAWGYIONE, Heslvetica Neue,Helvetica,Arial,sans-serif !important;
    }



</style>

<style>

    #mck-sidebox-launcher {
        display: none!important;
    }
    #mck-sidebox{
        width: 100% !important;
    }
    .mck-box-backdrop {
        width: 100% !important;
    }
    .mck-box-dialog {
        width: 100% !important;
    }
    .mck-msg-preview {
        max-width: 100% !important;
        width: 100%!important;
        box-sizing: border-box!important;
    }
    #mck-contacts-content{
        display: none!important;
    }
    #mck-sidebox-ft{
        padding: 0!important;
    }
    .mck-box-form{
        padding: 10px 5px!important;
    }
    #mck-text-box{
        font-family: Zawgyi-One!important;
    }
    .mck-preview-content {
        font-family: Zawgyi-One!important;
    }



    input,
    optgroup,
    select,
    textarea {
        font-family: Zawgyi-One!important;
    }

    /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

    /* Document
       ========================================================================== */

    /**
     * 1. Correct the line height in all browsers.
     * 2. Prevent adjustments of font size after orientation changes in
     *    IE on Windows Phone and in iOS.
     */

    html {
        line-height: 1.15; /* 1 */
        -ms-text-size-adjust: 100%; /* 2 */
        -webkit-text-size-adjust: 100%; /* 2 */
    }

    /* Sections
       ========================================================================== */

    /**
     * Remove the margin in all browsers (opinionated).
     */

    body {
        margin: 0;
    }

    /**
     * Add the correct display in IE 9-.
     */

    article,
    aside,
    footer,
    header,
    nav,
    section {
        display: block;
    }

    /**
     * Correct the font size and margin on `h1` elements within `section` and
     * `article` contexts in Chrome, Firefox, and Safari.
     */

    h1 {
        font-size: 2em;
        margin: 0.67em 0;
    }

    /* Grouping content
       ========================================================================== */

    /**
     * Add the correct display in IE 9-.
     * 1. Add the correct display in IE.
     */

    figcaption,
    figure,
    main { /* 1 */
        display: block;
    }

    /**
     * Add the correct margin in IE 8.
     */

    figure {
        margin: 1em 40px;
    }

    /**
     * 1. Add the correct box sizing in Firefox.
     * 2. Show the overflow in Edge and IE.
     */

    hr {
        box-sizing: content-box; /* 1 */
        height: 0; /* 1 */
        overflow: visible; /* 2 */
    }

    /**
     * 1. Correct the inheritance and scaling of font size in all browsers.
     * 2. Correct the odd `em` font sizing in all browsers.
     */

    pre {
        font-family: monospace, monospace; /* 1 */
        font-size: 1em; /* 2 */
    }

    /* Text-level semantics
       ========================================================================== */

    /**
     * 1. Remove the gray background on active links in IE 10.
     * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
     */

    a {
        background-color: transparent; /* 1 */
        -webkit-text-decoration-skip: objects; /* 2 */
    }

    /**
     * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
     * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
     */

    abbr[title] {
        border-bottom: none; /* 1 */
        text-decoration: underline; /* 2 */
        text-decoration: underline dotted; /* 2 */
    }

    /**
     * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
     */

    b,
    strong {
        font-weight: inherit;
    }

    /**
     * Add the correct font weight in Chrome, Edge, and Safari.
     */

    b,
    strong {
        font-weight: bolder;
    }

    /**
     * 1. Correct the inheritance and scaling of font size in all browsers.
     * 2. Correct the odd `em` font sizing in all browsers.
     */

    code,
    kbd,
    samp {
        font-family: monospace, monospace; /* 1 */
        font-size: 1em; /* 2 */
    }

    /**
     * Add the correct font style in Android 4.3-.
     */

    dfn {
        font-style: italic;
    }

    /**
     * Add the correct background and color in IE 9-.
     */

    mark {
        background-color: #ff0;
        color: #000;
    }

    /**
     * Add the correct font size in all browsers.
     */

    small {
        font-size: 80%;
    }

    /**
     * Prevent `sub` and `sup` elements from affecting the line height in
     * all browsers.
     */

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    /* Embedded content
       ========================================================================== */

    /**
     * Add the correct display in IE 9-.
     */

    audio,
    video {
        display: inline-block;
    }

    /**
     * Add the correct display in iOS 4-7.
     */

    audio:not([controls]) {
        display: none;
        height: 0;
    }

    /**
     * Remove the border on images inside links in IE 10-.
     */

    img {
        border-style: none;
    }

    /**
     * Hide the overflow in IE.
     */

    svg:not(:root) {
        overflow: hidden;
    }

    /* Forms
       ========================================================================== */

    /**
     * 1. Change the font styles in all browsers (opinionated).
     * 2. Remove the margin in Firefox and Safari.
     */

    button,
    input,
    optgroup,
    select,
    textarea {
        font-size: 100%; /* 1 */
        line-height: 1.15; /* 1 */
        margin: 0; /* 2 */
    }

    /**
     * Show the overflow in IE.
     * 1. Show the overflow in Edge.
     */

    button,
    input { /* 1 */
        overflow: visible;
    }

    /**
     * Remove the inheritance of text transform in Edge, Firefox, and IE.
     * 1. Remove the inheritance of text transform in Firefox.
     */

    button,
    select { /* 1 */
        text-transform: none;
    }

    /**
     * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
     *    controls in Android 4.
     * 2. Correct the inability to style clickable types in iOS and Safari.
     */

    button,
    html [type="button"], /* 1 */
    [type="reset"],
    [type="submit"] {
        -webkit-appearance: button; /* 2 */
    }

    /**
     * Remove the inner border and padding in Firefox.
     */

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    /**
     * Restore the focus styles unset by the previous rule.
     */

    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

    /**
     * Correct the padding in Firefox.
     */

    fieldset {
        padding: 0.35em 0.75em 0.625em;
    }

    /**
     * 1. Correct the text wrapping in Edge and IE.
     * 2. Correct the color inheritance from `fieldset` elements in IE.
     * 3. Remove the padding so developers are not caught out when they zero out
     *    `fieldset` elements in all browsers.
     */

    legend {
        box-sizing: border-box; /* 1 */
        color: inherit; /* 2 */
        display: table; /* 1 */
        max-width: 100%; /* 1 */
        padding: 0; /* 3 */
        white-space: normal; /* 1 */
    }

    /**
     * 1. Add the correct display in IE 9-.
     * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
     */

    progress {
        display: inline-block; /* 1 */
        vertical-align: baseline; /* 2 */
    }

    /**
     * Remove the default vertical scrollbar in IE.
     */

    textarea {
        overflow: auto;
    }

    /**
     * 1. Add the correct box sizing in IE 10-.
     * 2. Remove the padding in IE 10-.
     */

    [type="checkbox"],
    [type="radio"] {
        box-sizing: border-box; /* 1 */
        padding: 0; /* 2 */
    }

    /**
     * Correct the cursor style of increment and decrement buttons in Chrome.
     */

    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
        height: auto;
    }

    /**
     * 1. Correct the odd appearance in Chrome and Safari.
     * 2. Correct the outline style in Safari.
     */

    [type="search"] {
        -webkit-appearance: textfield; /* 1 */
        outline-offset: -2px; /* 2 */
    }

    /**
     * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
     */

    [type="search"]::-webkit-search-cancel-button,
    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    /**
     * 1. Correct the inability to style clickable types in iOS and Safari.
     * 2. Change font properties to `inherit` in Safari.
     */

    ::-webkit-file-upload-button {
        -webkit-appearance: button; /* 1 */
        font: inherit; /* 2 */
    }

    /* Interactive
       ========================================================================== */

    /*
     * Add the correct display in IE 9-.
     * 1. Add the correct display in Edge, IE, and Firefox.
     */

    details, /* 1 */
    menu {
        display: block;
    }

    /*
     * Add the correct display in all browsers.
     */

    summary {
        display: list-item;
    }

    /* Scripting
       ========================================================================== */

    /**
     * Add the correct display in IE 9-.
     */

    canvas {
        display: inline-block;
    }

    /**
     * Add the correct display in IE.
     */

    template {
        display: none;
    }

    /* Hidden
       ========================================================================== */

    /**
     * Add the correct display in IE 10-.
     */

    [hidden] {
        display: none;
    }


    .van-toast {
        word-break: break-word!important;
    }
</style>

<style lang="stylus">
$page-transition-duration = 0.35s

#app
    font-family Zawgyi-One, 'Avenir', Helvetica, Arial, sans-serif!important;
    /*-webkit-font-smoothing antialiased*/
    /*-moz-osx-font-smoothing grayscale*/
    /*text-align center*/
    color #2c3e50
    height 100%

    .app-view
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        -webkit-overflow-scrolling touch
        background white

        &::-webkit-scrollbar
            width 0
            background transparent

        &.transition-slide
            transition transform $page-transition-duration cubic-bezier(0, 0, 0.2, 1)

            &.slide-left-enter
                transform translate(100%, 0)

            &.slide-left-enter-active
                box-shadow 0 0 16px 2px rgba(0, 0, 0, 0.3)

            &.slide-right-enter
                transform translate(-30%, 0)
                transition-timing-function linear

            &.slide-right-leave-active
                transform translate(100%, 0)
                box-shadow 0 0 16px 2px rgba(0, 0, 0, 0.3)
                z-index 99

            &.slide-left-leave-active
                transform translate(-30%, 0)
                transition-timing-function linear

            &.app-view-scroll-enabled,
            &.slide-left-enter-active,
            &.slide-left-leave-active,
            &.slide-right-enter-active,
            &.slide-right-leave-active
                overflow-y auto

        &.transition-fade
            /*opacity 1*/
            /*transition opacity 1s ease*/

            /*&.fade-enter*/
                /*opacity 0*/

            /*&.fade-leave-active*/
                /*opacity 0*/
</style>

